<template>
  <div class="home" ref="home">
    <!-- 顶部区域 -->
    <div class="top-area">
      <!-- 遮罩 -->
      <div class="mask"></div>
      <!-- 顶部搜索框和图标 -->
      <div class="top-nav">
        <div class="m-icon logo"></div>
        <div class="m-search">
          <div class="serach-icon"><van-icon name="search" /></div>
          <input
            type="text"
            ref="searchIpt"
            v-model="keywords"
            placeholder="显示器"
            @keydown.enter="searchHandel"
          />
          <div class="serach-icon"><van-icon name="scan" /></div>
        </div>
        <div class="m-icon"><van-icon name="qr" /></div>
        <div class="m-icon"><span class="iconfont icon-kefu"></span></div>
      </div>
      <!-- 轮播图 -->
      <div class="swiper">
        <van-swipe :autoplay="3000" touchable>
          <van-swipe-item
            v-for="(item, index) in swipeImgs"
            :key="index"
            @click="goToGoodsDetail(15694)"
          >
            <img class="auto-img" v-lazy="item.img_url" />
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <!-- 顶部售后无忧 -->
    <div class="server-text">
      <div class="server-text-item" v-for="item in textData" :key="item.title">
        <span class="iconfont icon-kongxinduigou"></span>
        <div>{{ item.title }}</div>
      </div>
    </div>
    <!-- 分类 -->
    <div class="category-wrap" @scroll="toChangeScrollBar($event)">
      <div class="category" ref="category">
        <div
          class="category-item"
          v-for="item in 18"
          @click="goToGoodsDetail(15694)"
        >
          <div class="category-item-img"></div>
          <div class="category-item-title">小米上新</div>
        </div>
      </div>
    </div>
    <!-- 滚动条 -->
    <div class="scrollbar-wrap">
      <scrollBarCom
        :presentMove="presentMove"
        :Barwidth="60"
        :BarHeight="3"
        :activeBarWidth="25"
      />
    </div>
    <!-- 新人专享福利 -->
    <div class="new-user-gift">
      <!-- 顶部文字 -->
      <div class="top-tip">
        <div class="text-left">新人专享福利</div>
        <div class="text-right">
          限时9折起·更多优惠 <van-icon name="arrow" />
        </div>
      </div>
      <!-- 商品 -->
      <div class="goods-wrap">
        <div class="goods-list" v-for="item in 4" :key="item">
          <div class="goods-img"></div>
          <div class="goods-name">USB-C数据线</div>
          <div class="goods-discount">
            <div class="text">9.9元包邮9.9元包邮9.9元包邮</div>
            <div class="arrow"><van-icon name="arrow" /></div>
          </div>
        </div>
      </div>
      <!-- 券 -->
      <div class="discount-wrap">
        <!-- 左边券 -->
        <div class="discount-list-wrap">
          <div class="discount-list" v-for="item in 3" :key="item">
            <div class="circle left"></div>
            <div class="circle right"></div>
            <div class="discount-top">
              <div class="discount-num">¥<span>10</span></div>
              <div class="tip">限时包邮</div>
            </div>
            <div class="discount-type">包邮券</div>
          </div>
        </div>
        <!-- 右边一键领取 -->
        <div class="get-all">
          <div class="total">¥<span>248</span></div>
          <div class="tip">新人专享优惠券</div>
          <div class="getall-btn">一键领取</div>
        </div>
      </div>
    </div>
    <!-- 商品区1 -->
    <div class="goods-area1" v-if="goods1Data.length > 0">
      <div
        class="left"
        @click="goToGoodsDetail(goods1Data[0].action.productId)"
      >
        <img class="auto-img" :src="goods1Data[0].img_url" alt="" />
      </div>
      <div class="right">
        <div
          class="right-1"
          @click="goToGoodsDetail(goods1Data[1].action.productId)"
        >
          <img class="auto-img" :src="goods1Data[1].img_url" alt="" />
        </div>
        <div
          class="right-2"
          @click="goToGoodsDetail(goods1Data[2].action.productId)"
        >
          <img class="auto-img" :src="goods1Data[2].img_url" alt="" />
        </div>
      </div>
    </div>
    <!-- 商品区2 -->
    <div class="goods-area1" v-if="goods1Data.length > 0">
      <div class="right">
        <div
          class="right-1"
          @click="goToGoodsDetail(goods1Data[1].action.productId)"
        >
          <img class="auto-img" :src="goods1Data[1].img_url" alt="" />
        </div>
        <div
          class="right-2"
          @click="goToGoodsDetail(goods1Data[2].action.productId)"
        >
          <img class="auto-img" :src="goods1Data[2].img_url" alt="" />
        </div>
      </div>
      <div
        class="left"
        @click="goToGoodsDetail(goods1Data[0].action.productId)"
      >
        <img class="auto-img" :src="goods1Data[0].img_url" alt="" />
      </div>
    </div>
    <!-- 为你精选 -->
    <div class="bottom-content" v-if="goods1Data.length > 0">
      <div class="content-list">
        <div
          class="content-list-item"
          v-for="item in 6"
          :key="item"
          @click="goToGoodsDetail({ id: 15694, router: $router })"
        >
          <div class="goods-img">
            <img class="auto-img" :src="goods1Data[2].img_url" alt="">
          </div>
          <div class="goods-text">
            <div class="goods-name">Redmi AirDots 3 Pro 原神版</div>
            <div class="goods-desc">蒙德最强战斗力</div>
            <div class="goods-price">
              ¥2099<span class="up">起</span
              ><span class="before-price">¥2399</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
import { getHomeCategory, getHome } from "@/api/home";
import { getCategoryGoods } from "@/api/category";
import { throttle } from "@/utils/throttle";
import scrollBarCom from "@/components/scrollBarCom.vue";
export default {
  name: "HomeView",
  components: {
    scrollBarCom,
  },
  data() {
    return {
      //轮播图数据
      swipeImgs: [],
      //顶部售后无忧文字数据
      textData: [
        {
          title: "官方商城",
        },
        {
          title: "售后无忧",
        },
        {
          title: "资质证核",
        },
      ],
      //滚动条滚动比率
      presentMove: 0,
      //商品区1数据
      goods1Data: [],
      //搜索关键词
      keywords: "",
    };
  },
  created() {
    this.getHomeCategoryData();

    //轮播图数据
    this.getHomeData();
  },
  activated() {
    let shopcartData = localStorage.getItem("shopcartData");
    if (!shopcartData) {
      let shopcartData = [];
      localStorage.setItem("shopcartData", JSON.stringify(shopcartData));
    }
    let collectedData = localStorage.getItem("collectedData");
    if (!collectedData) {
      let collectedData = [];
      localStorage.setItem("collectedData", JSON.stringify(collectedData));
    }
    let historyData = localStorage.getItem("historyData");
    if (!historyData) {
      let historyData = [];
      localStorage.setItem("historyData", JSON.stringify(historyData));
    }
  },
  methods: {
    // 商品数据
    getHomeCategoryData() {
      //商品ID body.items.action.productId
      getHomeCategory({ axios: this.axios }).then((res) => {
        let result = res.data.data.data.sections;
        // console.log(result);
        this.goods1Data = result[4].body.items;
      });
    },
    //轮播图数据
    getHomeData() {
      getHome({ axios: this.axios }).then((res) => {
        let result = res.data.data.data.sections;
        this.swipeImgs = result[0].body.items;
      });
    },
    //跳转商品详情页
    goToGoodsDetail(id) {
      if (id == undefined) {
        id = 15694;
      }
      this.$router.push({ name: "goodsDetailView", params: { id } });
    },
    //分类滚动方法
    toChangeScrollBar: throttle(function (e) {
      //滚动距离
      let moveX = e.target.scrollLeft;
      //两条滚动条的差额
      let presentW =
        this.$refs.category.clientWidth - this.$refs.home.clientWidth;
      //移动距离的比率
      let presentMove = moveX / presentW;
      //限制最小为0,最大为1
      presentMove = presentMove < 0 ? 0 : presentMove > 1 ? 1 : presentMove;
      this.presentMove = presentMove;
    }, 40),
    //搜索
    searchHandel() {
      this.$router.push({
        name: "SearchView",
        query: { keywords: this.keywords },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  padding: 10px;
  box-sizing: border-box;
  width: 100vw;
  overflow: hidden;
  padding-bottom: 60px;
  .top-area {
    width: 100vw;
    position: relative;
    left: -10px;
    top: -10px;
    .top-nav {
      width: 100vw;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 10;
      padding: 0 10px;
      box-sizing: border-box;
      background-color: rgba(0, 0, 0, 0.01);
      .m-icon {
        width: 30px;
        height: 30px;
        font-size: 25px;
        line-height: 30px;
        overflow: hidden;
        color: #fff;
        .icon-kefu {
          font-size: 25px;
        }
        &.logo {
          background: url("@/assets/images/home/icon-header-logo3.ddf2a1c313.png")
            no-repeat center center;
          background-size: cover;
        }
      }
      .m-search {
        width: 220px;
        height: 35px;
        background-color: rgba(221, 221, 221, 0.9);
        border-radius: 999px;
        display: flex;
        align-items: center;
        font-size: 20px;
        padding: 0 10px;
        input {
          width: calc(100% - 50px);
          background-color: rgba(184, 184, 184, 0.05);
          font-size: 15px;
          margin-left: 5px;
        }
      }
    }
    .swiper {
      width: 100%;
      overflow: hidden;
      ::v-deep .van-swipe__track {
        height: 187px;
      }
    }
  }
  .server-text {
    display: flex;
    align-items: center;
    justify-content: center;
    .server-text-item {
      display: flex;
      align-items: center;
      .icon-kongxinduigou {
        margin-right: 3px;
      }
    }
    .server-text-item:nth-child(2) {
      margin: 0 60px;
    }
  }
  .category-wrap {
    overflow-x: scroll;
    .category {
      width: 620px;
      margin-top: 10px;
      padding-left: 15px;
      display: flex;
      flex-wrap: wrap;
      .category-item {
        width: 50px;
        height: 50px;
        margin-right: 20px;
        margin-bottom: 30px;
        &:nth-child(9n) {
          margin-right: 0;
        }
        .category-item-img {
          width: 50px;
          height: 50px;
          margin-bottom: 5px;
          overflow: hidden;
          background: url('@/assets/images/Snipaste_2022-12-20_17-18-00.jpg') no-repeat center center;
          background-size: cover;
        }
      }
    }
  }
  .scrollbar-wrap {
    width: 100%;
    margin-top: -15px;
  }
  .new-user-gift {
    margin-top: 20px;
    width: 100%;
    border-radius: 10px;
    padding: 10px;
    box-sizing: border-box;
    background-color: rgb(251, 237, 219);
    .top-tip {
      display: flex;
      width: 100%;
      justify-content: space-between;
      align-items: center;
      .text-left {
        font-size: 18px;
        font-weight: 600;
        font-style: oblique;
      }
      .text-right {
        font-weight: 600;
      }
    }
    .goods-wrap {
      width: 100%;
      background-color: #fff;
      margin-top: 10px;
      border-radius: 6px;
      padding: 5px 10px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      .goods-list {
        width: 25%;
        text-align: center;
        // margin-right: 10px;
        transform: scale(0.9);
        &:last-of-type {
          margin-right: 0;
        }
        .goods-img {
          width: 60px;
          height: 60px;
          margin: 0 auto;
          overflow: hidden;
          background: url('@/assets/images/Snipaste_2022-12-20_17-27-55.jpg') no-repeat center center;
          background-size: cover;
        }
        .goods-name {
          margin: 10px 0;
          font-weight: 600;
          max-width: 75px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .goods-discount {
          width: 100%;
          height: 20px;
          background-color: rgb(246, 80, 57);
          border-radius: 4px;
          color: #fff;
          text-align: center;
          line-height: 20px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          padding: 0 5px;
          box-sizing: border-box;
          display: flex;
          .text {
            max-width: 60px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .arrow {
            margin-left: auto;
          }
        }
      }
    }
    .discount-wrap {
      margin-top: 5px;
      background-color: red;
      border-radius: 6px;
      width: 100%;
      display: flex;
      padding: 5px;
      box-sizing: border-box;
      position: relative;
      .discount-list-wrap {
        width: 70%;
        display: flex;
        .discount-list {
          background-color: #fff;
          width: 33.3%;
          margin-right: 4px;
          border-radius: 4px;
          position: relative;
          .circle {
            width: 8px;
            height: 8px;
            background-color: red;
            border-radius: 999px;
            position: absolute;
            &.left {
              left: -5px;
              top: 67%;
            }
            &.right {
              right: -5px;
              top: 67%;
            }
          }
          .discount-top {
            border-bottom: 1px dashed #000;
            margin-bottom: 8px;
            .discount-num {
              margin: 15px 0 10px;
              span {
                font-size: 18px;
                font-weight: 600;
              }
            }
            .tip {
              margin-bottom: 10px;
            }
          }
        }
      }
      .get-all {
        color: #fff;
        width: 30%;
        padding: 5px 20px;
        .total {
          span {
            font-size: 28px;
            font-weight: 600;
          }
        }
        .tip {
          margin: 3px 0 10px;
        }
        .getall-btn {
          color: #000;
          width: 80px;
          height: 27px;
          border-radius: 999px;
          background-color: #fff;
          text-align: center;
          line-height: 27px;
          border: 1px solid rgb(153, 153, 153);
        }
      }
    }
  }
  .goods-area1 {
    width: 100%;
    height: 250px;
    margin-top: 10px;
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
    .left {
      width: 49%;
      height: 100%;
    }
    .right {
      width: 49%;
      height: 100%;
      .right-1 {
        width: 100%;
        height: calc(50% - 1.5px);
        margin-bottom: 3px;
      }
      .right-2 {
        width: 100%;
        height: calc(50% - 1.5px);
      }
    }
  }
  .bottom-content {
    margin-top: 15px;
    width: 100%;
    background-color: #f5f5f5;
    border-radius: 8px;
    .bottom-content-title {
      font-weight: 600;
      font-size: 16px;
      text-align: left;
      margin-bottom: 10px;
    }
    .content-list {
      width: 100%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .content-list-item {
        width: calc(50% - 5px);
        border-radius: 8px;
        overflow: hidden;
        text-align: left;
        margin-right: 10px;
        margin-bottom: 20px;
        &:nth-child(2n) {
          margin-right: 0;
        }
        .goods-img {
          width: 100%;
          background-color: #fff;
          overflow: hidden;
        }
        .goods-text {
          background-color: #f9f9f9;
          padding: 10px;
          box-sizing: border-box;
          .goods-name {
            font-weight: 600;
            font-size: 14px;
            margin-bottom: 10px;
          }
          .goods-desc {
            font-size: 12px;
            color: #999;
            margin-bottom: 10px;
          }
          .goods-price {
            font-weight: 600;
            font-size: 14px;
            display: flex;
            align-items: center;
            .up {
              font-size: 12px;
            }
            .before-price {
              font-size: 12px;
              color: #999;
              text-decoration: line-through;
              margin-left: 5px;
            }
          }
        }
      }
    }
  }
}
</style>
